<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <meta name="referrer" content="no-referrer">
    <title>设置-个人信息</title>
<!--     <link rel="icon" href="./img/assets/img/favicon.ico">-->

    <link rel="stylesheet" type="text/css" href="css/webbase.css" />
    <link rel="stylesheet" type="text/css" href="css/pages-seckillOrder.css" />

    <style>
        .row{
            margin-bottom: 5px;
        }
        #photo {
            max-width: 100%;
        }
        .img-preview {
            width: 100px;
            height: 100px;
            overflow: hidden;
        }
        button {
            margin-top:10px;
        }
        #result {
            width: 150px;
            height: 150px;
        }
    </style>
    <script src="plugins/jquery/jquery.min.js"></script>
    <script src="js/vue/vue.js"></script>
    <script src="js/vue/vuetify.js"></script>

</head>

<body>
    <!--页面顶部白条条，由js动态加载-->
	<script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
	<div class="nav-bottom"></div>
    <script type="text/javascript">$(".nav-bottom").load("top.html");</script>

<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#service").hover(function(){
		$(".service").show();
	},function(){
		$(".service").hide();
	});
	$("#shopcar").hover(function(){
		$("#shopcarlist").show();
	},function(){
		$("#shopcarlist").hide();
	});

})
</script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery-placeholder/jquery.placeholder.min.js"></script>
<script type="text/javascript" src="js/widget/nav.js"></script>
<script type="text/javascript" src="js/plugins/birthday/birthday.js"></script>
<script type="text/javascript" src="js/plugins/citypicker/distpicker.data.js"></script>
<script type="text/javascript" src="js/plugins/citypicker/distpicker.js"></script>
<script type="text/javascript" src="js/plugins/upload/uploadPreview.js"></script>
<script type="text/javascript" src="js/pages/main.js"></script>
 <script src="./js/vue/vue.js"></script>
  <script src="./js/axios.min.js"></script>
 <script src="./js/common.js"></script>
<script src="./js/validate.js"></script>

    <link rel="stylesheet" href="plugins/scropper/cropper.css">
    <script src="plugins/scropper/cropper.js"></script>

<script>
            $(function() {               
                $.ms_DatePicker({
                    YearSelector: "#select_year2",
                    MonthSelector: "#select_month2",
                    DaySelector: "#select_day2"
                });
            });
 </script>

</body>
    <!--header-->
    <div id="account">
        <div class="py-container">
            <div class="yui3-g home">
                <!--左侧列表-->
                <div class="yui3-u-1-6 list">

                    <div class="person-info">
                        <div class="person-photo">
                            <img src="img/_/photo.png" alt="">
                        </div>

                        <div class="person-account">
                            <span class="name">Michelle</span>
                            <span class="safe">账户安全</span>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="list-items">
                        <dl>
							<dt><i>·</i> 订单中心</dt>
							<dd ><a href="home-index.html"   >我的订单</a></dd>
							<dd><a href="home-order-pay.html" >待付款</a></dd>
							<dd><a href="home-order-send.html"  >待发货</a></dd>
							<dd><a href="home-order-receive.html" >待收货</a></dd>
							<dd><a href="home-order-evaluate.html" >待评价</a></dd>
						</dl>
						<dl>
							<dt><i>·</i> 我的中心</dt>
							<dd><a href="home-person-collect.html" >我的收藏</a></dd>
							<dd><a href="home-person-footmark.html" >我的足迹</a></dd>
						</dl>
						<dl>
							<dt><i>·</i> 物流消息</dt>
						</dl>
						<dl>
							<dt><i>·</i> 设置</dt>
							<dd><a href="home-setting-info.html" class="list-active">个人信息</a></dd>
							<dd><a href="home-setting-address.html"  >地址管理</a></dd>
							<dd><a href="home-setting-safe.html" >安全管理</a></dd>
						</dl>
                    </div>
                </div>
                <!--右侧主内容-->
                <div class="yui3-u-5-6">
                    <div class="body userInfo" id="app">
                        <ul class="sui-nav nav-tabs nav-large nav-primary ">
                            <li class="active"><a href="#one" data-toggle="tab">基本资料</a></li>
                            <li><a href="#two" data-toggle="tab" >头像照片</a></li>
                        </ul>
                        <div class="tab-content ">
                            <div id="one" class="tab-pane active">
                                <form id="form-msg"  class="sui-form form-horizontal">
                                    <input type="hidden" name="address" value="{}">
                                    <div class="control-group">
                                        <label for="inputName" class="control-label">昵称：</label>
                                        <div class="controls">
                                            <input type="text" id="inputName" name="email" placeholder="昵称" v-model="userInfo.nickName">
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="inputGender" class="control-label">性别：</label>
                                        <div class="controls">
                                            <label data-toggle="radio" :class="userInfo.gender==1?'radio-pretty inline checked':'radio-pretty inline'">
                                            <input type="radio" name="gender" value="1" @click="toman"><span>男</span>
                                        </label>
                                            <label data-toggle="radio" :class="userInfo.gender==2?'radio-pretty inline checked':'radio-pretty inline'">
                                            <input type="radio" name="gender" value="2" @click="toWoman"><span>女</span>
                                        </label>
                                        </div>

                                    </div>
                                    <div class="control-group">
                                        <label for="inputPassword" class="control-label">生日：</label>
                                        <div class="controls">
                                            <select id="select_year2" rel="1990" v-model="year"></select>年
                                            <select id="select_month2" rel="4" v-model="month"></select>月
                                            <select id="select_day2" rel="3" v-model="day"></select>日
                                        </div>

                                    </div>
                                    <div class="control-group">
                                        <label for="inputPassword" class="control-label">所在地：</label>

                                        <div class="controls" >

                                            <div data-toggle="distpicker" id="target">
                                                <div class="form-group area">
                                                    <select class="form-control" id="province1" v-model="province"></select>
                                                </div>
                                                <div class="form-group area">
                                                    <select class="form-control" id="city1"  v-model="city"></select>
                                                </div>
                                                <div class="form-group area">
                                                    <select class="form-control" id="district1" v-model="district"></select>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="control-group">
                                        <label for="inputJob" class="control-label">职业：</label>
                                        <div class="controls"><span class="sui-dropdown dropdown-bordered select"><span class="dropdown-inner"><a role="button" data-toggle="dropdown" href="#" class="dropdown-toggle">
                                                <input name="job" type="hidden" data-rules="required"><i class="caret"></i><span >{{userInfo.job?userInfo.job:'请选择'}}</span></a>
                                            <ul id="menu4" role="menu" aria-labelledby="drop4" class="sui-dropdown-menu" >
                                                <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="bj" @click="getJob('程序员')">程序员</a></li>
                                                <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="sb" @click="getJob('产品经理')">产品经理</a></li>
                                                <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="sb" @click="getJob('UI设计师')">UI设计师</a></li>
                                            </ul>
                                            </span>
                                            </span>
                                        </div>
                                    </div>

                                    <div class="control-group">
                                        <label for="sanwei" class="control-label"></label>
                                        <div class="controls">
                                            <button  class="btn-primary" @click.prevent="saveUserInfo">保存/修改</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div id="two" class="tab-pane">

                                <div>
                                    <p>当前头像</p>
                                    <img id="imgShow_WU_FILE_0" width="100" height="100" :src="userInfo.image" alt="您还未上传头像">

                                    <br/><span>选择图片</span><br>


                                            <input type="file" id="input" name="file" class="sr-only">
                                    </div>
                                <div class="inline">
                                    <div>
                                        <div style="height: 250px;width: 280px;">
                                            <img src="" id="photo">
                                        </div>
                                </div>
                                <div>
                                    <button class="btn btn-primary" onclick="crop()">裁剪图片</button>
                                    <div>
                                        <br/>
<!--                                        <p>-->
<!--                                            结果：-->
<!--                                        </p>-->
<!--                                        <div><img src="" alt="裁剪结果" id="result"></div>-->
                                    </div>
                                    <input type="hidden"  id="urlData" >
                                </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
        </div>
    </div>

<script type="text/javascript">
    $(window).load(function() {
        var options =
            {
                thumbBox: '.thumbBox',
                spinner: '.spinner',
                imgSrc: 'images/avatar.png'
            }
        var cropper = $('.imageBox').cropbox(options);
        $('#file').on('change', function(){
            var reader = new FileReader();
            reader.onload = function(e) {
                options.imgSrc = e.target.result;
                cropper = $('.imageBox').cropbox(options);
            }
            reader.readAsDataURL(this.files[0]);
            this.files = [];
        })
        $('#btnCrop').on('click', function(){
            var img = cropper.getDataURL();
            $('.cropped').append('<img src="'+img+'">');
        })
        $('#btnZoomIn').on('click', function(){
            cropper.zoomIn();
        })
        $('#btnZoomOut').on('click', function(){
            cropper.zoomOut();
        })
    });
</script>
<script type="text/javascript">
    var saveUserInfo =new Vue({
        el: ".tab-content",
        data: {
            user: '',
            baseData: '',
            userInfo: {
                nickName: "",
                image: "",
                gender: "",
                birthday: "",
                address: '',
                job: "",
                userId: ''
            },
            year: '',
            month: '',
            day: '',
            province: '北京市',
            city: '北京市市辖区',
            district: "西城区"
        },
        async  created(){
            try {
                const resp =await ly.http.get("/auth/verify");
                this.user = resp.data;
                 this.userInfo.userId=this.user.id
            } catch {
                window.alert("请先登录")
                window.location.href = "http://www.leyou.com/login.html?returnUrl=" + window.location.href;
            }
            this.loadUserInfo()
        },
        methods: {
            loadUserInfo() {
                ly.http.get("/user/loadUserInfo?userId="+this.userInfo.userId).then(resp=>{
                 {
                     if (resp.data){
                         this.userInfo=resp.data
                         this.userInfo.birthday= resp.data.birthday
                         var strings = this.userInfo.birthday.split("-");
                         this.year=strings[0]
                         var month=strings[1]
                         if (month.startsWith("0")){
                             this.month= month.substring(1,2)
                         }else {
                             this.month=month
                         }
                         this.day=strings[2]

                         var s= this.userInfo.address.split("/");
                         //销毁插件实例
                         $('#target').distpicker('destroy');//强制赋值前需要做的
                         $("#target").distpicker({
                             province: s[0],
                             city: s[1],
                             district: s[2]
                         });
                         this.province=s[0];
                         this.city=s[1];
                         this.district=s[2]
                     }
                 }

                }).catch()
            },
            saveUserInfo() {
                this.isLogin();
                this.baseData=document.getElementById("urlData").value
                this.userInfo.address=this.province+"/"+this.city+"/"+this.district
                this.userInfo.birthday=this.year+"-"+this.month+"-"+this.day
                var formData =new FormData();
                formData.append("nickName",this.userInfo.nickName);
                formData.append("gender",this.userInfo.gender)
                formData.append("birthday",this.userInfo.birthday)
                formData.append("address",this.userInfo.address)
                formData.append("job",this.userInfo.job)
                formData.append("userId",this.userInfo.userId)
                formData.append("baseData",this.baseData)
                formData.append("image",this.userInfo.image)
                ly.http.post("/user/saveUserInfo",formData,{headers: {'Content-Type': 'multipart/form-data'}}).then(function () {
                    window.alert("保存/修改成功")
                }).catch(function () {
                    window.alert("保存/修改失败")
                })
            },
            isLogin() {
                return new Promise((resolve, reject) => {
                    ly.http.get("/auth/verify").then(resp => {
                        resolve(resp);
                    }).catch(error => {
                        if (this.user) {
                            // 重新登录
                            console.log("已过期");
                            window.location.href = "http://www.leyou.com/login.html?returnUrl=" + window.location.href;
                        }
                        reject(error);
                    })
                });
            },
            toman(){
                this.userInfo.gender="1"
            },
            toWoman(){
                this.userInfo.gender="2"
            },
            getJob(text){
                this.userInfo.job=text
            },
            getProvince(a){
               console.log(this.$refs.newText.sel)
            }
        },
        watch: {
        }

    })
</script>
<script type="text/javascript">
    // 修改自官方demo的js
    var initCropper = function (img, input){
        var $image = img;
        var options = {
            aspectRatio: 1, // 纵横比
            viewMode: 2,
            // preview: '.img-preview' // 预览图的class名
        };
        $image.cropper(options);
        var $inputImage = input;
        var uploadedImageURL;
        if (URL) {
            // 给input添加监听
            $inputImage.change(function () {
                var files = this.files;
                var file;
                if (!$image.data('cropper')) {
                    return;
                }
                if (files && files.length) {
                    file = files[0];
                    // 判断是否是图像文件
                    if (/^image\/\w+$/.test(file.type)) {
                        // 如果URL已存在就先释放
                        if (uploadedImageURL) {
                            URL.revokeObjectURL(uploadedImageURL);
                        }
                        uploadedImageURL = URL.createObjectURL(file);
                        // 销毁cropper后更改src属性再重新创建cropper
                        $image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
                        $inputImage.val('');
                    } else {
                        window.alert('请选择一个图像文件！');
                    }
                }
            });
        } else {
            $inputImage.prop('disabled', true).addClass('disabled');
        }
    }
    var crop = function(){
        var $image = $('#photo');
       var $baseData = $("#urlData")
        var $target = $('#imgShow_WU_FILE_0');
        //裁剪后返回的canvas对象
        var cas= $image.cropper('getCroppedCanvas',{
            width:300, // 裁剪后的长宽
            height:300
        });
        cas.toBlob(function(blob){
            // 裁剪后将图片放到指定标签
            $target.attr('src', URL.createObjectURL(blob));

        });
      var  base64Data=cas.toDataURL('image/jpeg');
        $baseData.val(base64Data)
        var tre= $baseData.val()
    };

    $(function(){
        initCropper($('#photo'),$('#input'));
    });
</script>
	<!-- 底部栏位 -->
	<!--页面底部，由js动态加载-->
	<div class="clearfix footer"></div>
	<script type="text/javascript">$(".footer").load("foot.html");</script>
	<!--页面底部END-->

</html>